<template>
	<view>
		<cu-custom bgColor="bg-gradual-fff" isBack="true">
			<block slot="content">邀请记录</block>
		</cu-custom>
		<u-loading-page :loading="true" loading-text="loading..." v-if="showLoading"></u-loading-page>
		<view v-show="!showLoading">
			<view class="viewbox"></view>
			<view class="user">
				<view>
					<view class="index_b_d_aaa">
						<u-tabs
							ref="tabs" 
							:current="current" 
							@click="tabsChange" 
							lineColor="#CC8FBE"
							:activeStyle="{
									fontSize: '28rpx',
									fontFamily: 'PingFang SC',
									fontWeight: '800',
									color: '#CC8FBE'
									}"
							:inactiveStyle="{
									fontSize: '28rpx',
									fontFamily: 'PingFang SC',
									color: '#fff'
									}"
							itemStyle="padding-left:20rpx; padding-right:20rpx; height: 80rpx;"
							:list="order_type" 
							:is-scroll="false"
							>
						</u-tabs>
					</view>
					<view class="user_d">
						<view class="user_d_b">
							<view class="user_d_b_a" v-for="(item, index) in UserList">
								<view class="user_d_b_a_a">
									<image :src="item.avatar"></image>
								</view>
								<view class="user_d_b_a_b">
									<view class="user_d_b_a_b_a">{{item.nickname}}</view>
									<view class="user_d_b_a_b_b">{{item.create_time}}</view>
								</view>
							</view>
						</view>
						<loading-footer :status="status" :slot-empty="true">
							<view slot="empty" class="column-center" style="padding-top: 200rpx">
								<image class="img-null" src="/static/goods_null.png"></image>
								<text class="lighter">暂无客户</text>
							</view>
						</loading-footer>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
import request from '@/common/request.js';	
import storage from '@/common/storage.js';
import {
	loadingType
} from '@/utils/type';
export default {
	data() {
		return {
			showLoading:false,
			UserList:[],
			uid:0,
			status: loadingType.LOADING,
			page: 1,
			limit:8,
			current:0,
			order_type: [
				{
					name:'直推'
				},
				{
					name:'间推'
				}
			],
		}
	},
	onLoad: function (options) {
		
	},
	onShow(){
		this.uid=uni.getStorageSync('uid');
		this.onRefresh();
	},
	onReachBottom: function() {
		this.getUserShareListFun();
	},
	methods: {
		tabsChange(e){
			this.current = e.index;
			this.onRefresh();
		},
		onRefresh() {
			this.page = 1
			this.UserList = []
			this.status = loadingType.LOADING;
			this.getUserShareListFun();
		},
		async getUserShareListFun() {
			let {
				page,
				limit,
				UserList,
				status
			} = this;
			if (status == loadingType.FINISHED) return;
			const paramsList = {
				page: page,
				limit:limit,
				uid:this.uid
			}
			if(this.current==0){
				paramsList.type='first';
			}
			if(this.current==1){
				paramsList.type='second';
			}
			let optsList = {
				url: 'u-fans',
				method: 'get'
			};
			request.httpTokenRequest(optsList, paramsList).then(res => {
				if(res.data.code == 200){
					if(page == 1) UserList = []
					let {
						list,
						more
					} = res.data.data
					this.UserList.push(...list)
					this.page = ++page
					if (!more) {
						this.status = loadingType.FINISHED
					}
					if (this.UserList.length <= 0) {
						this.status = loadingType.EMPTY
					}
				} else {
					this.status = loadingType.ERROR
				}
				this.showLoading=false;
			});
		}
	}
}
</script>

<style  lang="scss" scoped>
	.user{
		width:750rpx;
		height:auto;
		overflow: hidden;
		margin: auto;
	}
	.user_d{
		width: 710rpx;
		height:auto;
		margin: auto;
		overflow: hidden;
	}
	.user_d_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #000000;
		line-height: 90rpx;
		height: 90rpx;
		width: 100%;
	}
	.user_d_b{
		width: 710rpx;
		height:auto;
		overflow: hidden;
	}
	.user_d_b_a{
		width: 710rpx;
		height:auto;
		box-shadow: inset 0 0 20rpx 20rpx rgba(85, 56, 105, 0.6);
		border-radius: 10rpx;
		padding:40rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}
	.user_d_b_a_a{
		width: 100rpx;
		height: 100rpx;
		background: #fff;
		border-radius: 50%;
		float: left;
	}
	.user_d_b_a_a image{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}
	.user_d_b_a_b{
		float: left;
		overflow: hidden;
		margin-left: 40rpx;
	}
	.user_d_b_a_b_a{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #fff;
		line-height: 60rpx;
	}
	.user_d_b_a_b_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #fff;
		line-height: 40rpx;
	}
	.user_d_b_a_c{
		float: right;
		overflow: hidden;
	}
	.user_d_b_a_c_a{
		font-family: PingFang SC;
		font-weight: 400;
		font-size:24rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: right;
	}
	.user_d_b_a_c_a .span{
		font-size:36rpx;
		font-weight: 700;
		margin-left: 10rpx;
	}
	.user_d_b_a_c_b{
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 18rpx;
		color: #999999;
		line-height: 40rpx;
		text-align: right;
	}
</style>